// 渲染导航列表
function navLi() {
    axios.get('http://127.0.0.1:3000/api/v1/front/columnSearch').then(function (res) {
        if (res.status == 200) {
            if (res.data.code == 0) {
                for (let i = 0; i < res.data.data.list.length; i++) {
                    let div = document.createElement("div");
                    let divs = document.createElement("div");
                    div.className = 'navLi'
                    divs.className = 'bottomLi'
                    div.innerHTML = `<a href="home${res.data.data.list[i].type}.html?column_id=${res.data.data.list[i].id}&name=${res.data.data.list[i].name}">${res.data.data.list[i].name}</a>`
                    divs.innerHTML = `<a href="home${res.data.data.list[i].type}.html?column_id=${res.data.data.list[i].id}&name=${res.data.data.list[i].name}">${res.data.data.list[i].name}</a>`
                    div.setAttribute('data-id', res.data.data.list[i].id);
                    divs.setAttribute('data-id', res.data.data.list[i].id);
                    div.setAttribute('data-type', res.data.data.list[i].type);
                    divs.setAttribute('data-type', res.data.data.list[i].type);
                    const navCenter = document.getElementsByClassName('navCenter')[0];
                    const bottomLeft = document.getElementsByClassName('bottomLeft')[0];
                    navCenter.appendChild(div)
                    bottomLeft.appendChild(divs)
                }
            }
        }
    }).catch(function (error) {
        console.log(error);
    })
}
navLi()

const images = document.querySelectorAll('.sliderImg');
const dot = document.querySelectorAll('.dot')
let currentIndex = 0;

function showNextImage() {
    images[currentIndex].classList.remove('actives');
    dot[currentIndex].classList.remove('active')
    currentIndex = (currentIndex + 1) % images.length;
    dot[currentIndex].classList.add('active')
    images[currentIndex].classList.add('actives');
    setTimeout(showNextImage, 3000); // 每 3 秒切换一次图片
}

images[currentIndex].classList.add('actives');
setTimeout(showNextImage, 3000)

// 更多渲染
function moreLeft() {
    axios
        .get("http://127.0.0.1:3000/api/v1/front/contentList", {
            params: {
                page: 1,
                size: 10
            },
        })
        .then(function (res) {
            if (res.status == 200) {
                if (res.data.code == 0) {
                    console.log(res);
                    for (let i = 0; i < 5; i++) {
                        let div = document.createElement("div");
                        div.className = "moreLi";
                        div.innerHTML = `<div class="moreLiLeft">
                            <div class="moreLiLeftTop">
                                19
                            </div>
                            <div class="moerLiLeftBottom">
                                2022-08
                            </div>
                        </div>
                        <div class="moreLiRight">
                            <div class="moreLiRightTop">
                                ${res.data.data.list[i].name}
                            </div>
                            <div class="moreLiRightBottom">
                            ${res.data.data.list[i].content}
                            </div>
                        </div>`;
                        const rightTd = document.getElementsByClassName("moreBottom")[0];
                        rightTd.appendChild(div);
                        let moreLi = document.getElementsByClassName('moreLi')[i];
                        moreLi.addEventListener('click', function() {
                            window.location.href = `./acticle.html?column_id=${res.data.data.list[0].cms_columnId}&name=${name}&id=${res.data.data.list[i].id}`
                        })
                    }
                    for (let i = 5; i < 10; i++) {
                        let div = document.createElement("div");
                        div.className = "moreLi";
                        div.innerHTML = `<div class="moreLiLeft">
                            <div class="moreLiLeftTop">
                                19
                            </div>
                            <div class="moerLiLeftBottom">
                                2022-08
                            </div>
                        </div>
                        <div class="moreLiRight">
                            <div class="moreLiRightTop">
                                ${res.data.data.list[i].name}
                            </div>
                            <div class="moreLiRightBottom">
                            ${res.data.data.list[i].content}
                            </div>
                        </div>`;
                        const rightTd = document.getElementsByClassName("moreBottoms")[0];
                        rightTd.appendChild(div);
                    }
                    
                }
            }
        })
        .catch(function (error) {
            console.log(error);
        });
}
moreLeft()
